<template>
	<view class="container">
		<view class="header">
			<text class="title">消息弹框测试</text>
		</view>
		
		<view class="content">
			<view class="section">
				<text class="section-title">基础消息测试</text>
				<view class="button-group">
					<button class="test-btn" @tap="showHomeworkMessage">作业消息</button>
					<button class="test-btn" @tap="showSystemMessage">系统消息</button>
					<button class="test-btn" @tap="showAIMessage">AI助手消息</button>
					<button class="test-btn" @tap="showClassmateMessage">同学消息</button>
				</view>
			</view>
			
			<view class="section">
				<text class="section-title">批量消息测试</text>
				<view class="button-group">
					<button class="test-btn batch" @tap="showMultipleMessages">连续3条消息</button>
					<button class="test-btn batch" @tap="showRandomMessages">随机5条消息</button>
				</view>
			</view>
			
			<view class="section">
				<text class="section-title">消息管理</text>
				<view class="button-group">
					<button class="test-btn manage" @tap="clearQueue">清空队列</button>
					<button class="test-btn manage" @tap="showQueueStatus">队列状态</button>
				</view>
			</view>
			
			<view class="section">
				<text class="section-title">实际场景模拟</text>
				<view class="button-group">
					<button class="test-btn scenario" @tap="simulateHomeworkDeadline">作业截止提醒</button>
					<button class="test-btn scenario" @tap="simulateHealthCodeUpdate">健康码更新</button>
					<button class="test-btn scenario" @tap="simulateClassNotification">班级通知</button>
				</view>
			</view>
		</view>
		
		<view class="info">
			<text class="info-text">💡 点击消息弹框可以跳转到相应页面</text>
			<text class="info-text">⏰ 消息会自动在3秒后消失</text>
			<text class="info-text">📱 多条消息会依次排队显示</text>
		</view>
	</view>
</template>

<script setup>
	import { onMounted } from 'vue'
	import messageManager from '@/utils/message-manager.js'
	
	// 显示作业消息
	const showHomeworkMessage = () => {
		messageManager.showHomeworkMessage(
			'您有新的作业需要完成：Java基础编程练习',
			{
				id: 1,
				teacherName: '张教授',
				deadline: '2024-01-20 23:59:59'
			}
		)
	}
	
	// 显示系统消息
	const showSystemMessage = () => {
		messageManager.showSystemMessage('您的健康码状态已更新为绿码')
	}
	
	// 显示AI助手消息
	const showAIMessage = () => {
		messageManager.showAIMessage('我发现您还有3个作业即将到期，需要帮助吗？')
	}
	
	// 显示同学消息
	const showClassmateMessage = () => {
		messageManager.showMessage({
			fromUser: '小明',
			content: '今天的数学作业你做了吗？记得明天要交哦！',
			avatar: '/static/avatar/xiaoming.png'
		})
	}
	
	// 显示多条连续消息
	const showMultipleMessages = () => {
		messageManager.showMessages([
			{
				fromUser: '系统消息',
				content: '第一条消息：系统维护通知',
				type: 'system'
			},
			{
				fromUser: '李老师',
				content: '第二条消息：明天的课程有调整',
				type: 'homework'
			},
			{
				fromUser: 'AI助手',
				content: '第三条消息：学习建议推送',
				type: 'ai'
			}
		])
	}
	
	// 显示随机消息
	const showRandomMessages = () => {
		const randomMessages = [
			{ fromUser: '王同学', content: '课件分享：高等数学第三章', type: 'text' },
			{ fromUser: '班主任', content: '下周班会时间调整通知', type: 'system' },
			{ fromUser: 'AI助手', content: '学习进度报告已生成', type: 'ai' },
			{ fromUser: '教务处', content: '期末考试安排已发布', type: 'system' },
			{ fromUser: '图书馆', content: '您预约的图书已到馆', type: 'text' }
		]
		
		// 随机选择5条消息
		const selectedMessages = randomMessages
			.sort(() => Math.random() - 0.5)
			.slice(0, 5)
		
		messageManager.showMessages(selectedMessages)
	}
	
	// 清空消息队列
	const clearQueue = () => {
		messageManager.clearQueue()
		uni.showToast({
			title: '队列已清空',
			icon: 'success'
		})
	}
	
	// 显示队列状态
	const showQueueStatus = () => {
		const queueLength = messageManager.getQueueLength()
		const currentMessage = messageManager.getCurrentMessage()
		
		let statusText = `队列中有 ${queueLength} 条消息`
		if (currentMessage) {
			statusText += `\n当前显示：${currentMessage.fromUser}`
		}
		
		uni.showModal({
			title: '队列状态',
			content: statusText,
			showCancel: false
		})
	}
	
	// 模拟作业截止提醒
	const simulateHomeworkDeadline = () => {
		messageManager.showHomeworkMessage(
			'⚠️ 作业即将截止：Java基础编程练习还有2小时截止，请尽快提交！',
			{
				id: 2,
				teacherName: '张教授',
				deadline: '今天 23:59',
				urgent: true
			}
		)
	}
	
	// 模拟健康码更新
	const simulateHealthCodeUpdate = () => {
		messageManager.showSystemMessage('🟢 您的健康码已更新为绿码，可正常参加课程活动')
	}
	
	// 模拟班级通知
	const simulateClassNotification = () => {
		messageManager.showMessage({
			fromUser: '班主任',
			content: '📢 重要通知：明天下午2点在阶梯教室举行期末总结大会，请准时参加',
			type: 'system'
		})
	}
	
	onMounted(() => {
		console.log('消息测试页面已加载')
	})
</script>

<style scoped>
	.container {
		padding: 20rpx;
		min-height: 100vh;
		background: #f5f5f5;
	}
	
	.header {
		text-align: center;
		padding: 40rpx 0;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.content {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.section {
		margin-bottom: 40rpx;
	}
	
	.section:last-child {
		margin-bottom: 0;
	}
	
	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.button-group {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}
	
	.test-btn {
		flex: 1;
		min-width: 200rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		font-size: 26rpx;
		border: none;
		background: #007AFF;
		color: white;
		margin: 0;
	}
	
	.test-btn.batch {
		background: #34C759;
	}
	
	.test-btn.manage {
		background: #FF9500;
	}
	
	.test-btn.scenario {
		background: #AF52DE;
	}
	
	.test-btn:active {
		opacity: 0.8;
		transform: scale(0.98);
	}
	
	.info {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}
	
	.info-text {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
	}
</style>






















